﻿.message {
    position: fixed;
    left: 1rem;
    right: 1rem;
    z-index: 1090;
    pointer-events: none;
}

    .message .alert {
        display: flex;
        align-items: baseline;
        min-width: 160px;
        max-width: 480px;
        white-space: normal;
        opacity: 0;
        top: -20px;
        bottom: unset;
        margin: 1rem auto 0 auto;
        transition: opacity .3s linear, top .3s linear, bottom .3s linear;
        pointer-events: auto;
    }

        .message .alert.show {
            opacity: 1;
            bottom: unset;
            top: 20px;
        }

        .message .alert > i + span {
            margin-left: .5rem;
        }

        .message .alert > span {
            flex: 1;
            flex-wrap: wrap;
            word-break: break-all;
        }

    .message.is-bottom .alert {
        top: unset;
        bottom: -20px;
    }

        .message.is-bottom .alert.show {
            top: unset;
            bottom: 20px;
        }
